<template>
  <div class="home">
    <div class="line">
      <button @click="togglePic(1)">图片1</button>
      <button @click="togglePic(2)">图片2</button>
    </div>
    <mcImage :src="src" :preview="true" />
  </div>
</template>

<script>

// @ is an alias to /src
import mcImage from "@/components/mcImage.vue";

export default {
  name: "Home",
  data() {
    return {
      src: "",
      height: "70px",
    };
  },
  mounted() {
    setTimeout(() => {
      this.src =
        "http://img5.adesk.com/5def76bfe7bce75e6bd854de?imageMogr2/thumbnail/!720x1280r/gravity/Center/crop/300x300";
    }, 30);
  },
  methods: {
    togglePic(num) {
      switch (num) {
        case 1:
          this.src =
            "http://img5.adesk.com/5def76bfe7bce75e6bd854de?imageMogr2/thumbnail/!720x1280r/gravity/Center/crop/720x720";
          break;
        default:
          this.src =
            "http://img5.adesk.com/5def76bfe7bce75e6bd854de?imageMogr2/thumbnail/!720x1280r/gravity/Center/crop/300x300";
          break;
      }
    },
  },
  computed: {
    width() {
      return "70px";
    },
  },
  components: {
    mcImage,
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
.line {
  width: 750px;
  height: 75px;
  background: #ccc;
}
</style>
